<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        padding: 100px 0 0 100px;
      }

      div {
        width: 400px;
        height: 400px;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <input type="button" value="我是按钮" />
    </div>

    <script>
      /*JavaScript 中的事件冒泡
          事件按照从目标元素到根元素（document对象）的顺序触发。
          即事件发生的顺序为：button — div — body — html — document
      */
      /*使用 stopPropagation() 方法阻止事件冒泡
          event.stopPropagation();//阻止冒泡
      */

      document.onclick = function () {
        console.log('我是document');
      };
      document.documentElement.onclick = function () {
        console.log('我是html');
      };
      document.body.onclick = function (e) {
        console.log('我是body');
        e.stopPropagation(); //阻止冒泡
      };
      document.getElementById('box').onclick = function () {
        console.log('我是div');
      };
      document.getElementsByTagName('input')[0].onclick = function (event) {
        console.log('我是input');
      };

      // 我是input
      // 我是div
      // 我是body
    </script>
  </body>
</html>
